/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, Input, TextArea, InputLine, LineColumn, useTheme, Table, TableHead, TableRow, CCell, TableBody, Cell, Layer, Button, Select,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, SelectHookfork, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {RepLink} from "../../common/base";
import {Each_ZdSetting, useTableEditor} from "../../hook/useRepTableEditor";

const title桥架=['金属结构无明显可见的损伤、缺陷。',
    '各主要零部件和电气设备无明显可见的损伤、缺陷。',
    '空载试验，操纵系统动作可靠、准确，各机构运行正常，无异常噪声等现象；起升高度限位、运行行程限位、幅度限位等安全保护装置动作可靠、准确。急停开关功能正常。'
];
const title升降=['金属结构无明显可见的损伤、缺陷。',
    '吊笼门应当能够完全遮蔽开口，并且配备机械锁在运行状态下门不能被打开；所有吊笼门都处于关闭位置时，吊笼才能启动和保持运行。',
    '层门应与吊笼电气或机械联锁，只有在吊笼底板在登机平台时，该平台的层门方可打开。所有层门处于关闭和锁紧位置时，吊笼才能启动和保持运行。',
    '空载试验，操纵系统动作可靠、准确，各机构运行正常，无异常噪声等现象；起升高度限位、运行行程限位、幅度限位等安全保护装置动作可靠、准确。急停开关功能正常。'
];
export const tail附设 = <Text css={{"@media print": {fontSize: '0.75rem'}}}>
    注：对于附表12三个表，无需检验的，仅填检验结果栏。
</Text>;
interface Props  extends InternalItemProps{
    nos?: string;
    titleJq?:any[];
    titleSj?:any[];
}
export const variant附设=['桥架型起重机、臂架型起重机、电动葫芦等起重设备','升降机等登机设备'];
export const config附设装置=[['序号','n',35],['设备种类','y',160,(obj,setObj)=>{
    return <Select inputSize="md" css={{minWidth:'140px',fontSize:'1.3rem',padding:'0 1rem'}}
                   value={obj?.y ||''} onChange={e => setObj({ ...obj, y: e.currentTarget.value||undefined}) }>
        <option></option>
        {variant附设.map((oTydec: any, i: React.Key) => {
            return <option key={i}>{oTydec}</option>
        })}</Select>
}],['设备名称','t',80],['设备型号','m',80],['额定起重量','Q',58],
    ['产品编号','p',78],['制造单位','u',142],['检验结果','r',42,(obj,setObj)=>{
        return <SelectHookfork value={ obj?.r ||''} onChange={e => setObj({ ...obj, r: e.currentTarget.value||undefined}) }/>
    }],['备注','Z',100]] as Each_ZdSetting[];
const 默认附设装置=[{n:'1',y:'桥架型起重机、臂架型起重机、电动葫芦等起重设备'},{n:'2',y:'桥架型起重机、臂架型起重机、电动葫芦等起重设备'},{n:'3',y:'升降机等登机设备'}];
//上render 不变的函数
const defaultValCb= (par: { 附设表?: any; })=>{
        const { 附设表,}=par;
        if(!附设表)   par.附设表=默认附设装置;          //【特别注意】不能用附设装需改名附设表，同名字导致错误不好解决不易发现，
        return  par;
}
export const itemA附设装=['附设表' ];
export const AttachmentDevice =
    React.forwardRef((
        {children, show, alone = true, repId,redId, nestMd, label,nos,titleJq=title桥架,titleSj=title升降}: Props, ref
    ) => {
        const theme = useTheme();
        const [getInpFilter]=useMeasureInpFilter(null,itemA附设装, defaultValCb);
        //【不能这么做】 const [getInpFilter]=useMeasureInpFilter(null,itemA附设装,(par)=>{
        //     const { 附设表,}=par;
        //     if(!附设表)   par.附设表=默认附设装置;          //【特别注意】不能用附设装需改名附设表，同名字导致错误不好解决不易发现，
        //     return  par;
        // });
        const {inp, setInp} = useItemInputControl({ ref });
        const headvw2=<Text variant="h5">
            {label}：
        </Text>;
        const breaks2=[280,620];
        const editAs=(obj:any, setObj:React.Dispatch<React.SetStateAction<any>>, seq:number | null)=>{
            const table='附设表';
            return <Layer elevation={"sm"} css={{display: 'flex',justifyContent: 'center',flexDirection: 'column',width: '-webkit-fill-available',
                [theme.mediaQueries.md]: {flexDirection: 'row',padding:'0.25rem'}
            }}>
                {seq===null? '新' : seq!+1}
                <div className="editLinc" css={{width: '-webkit-fill-available'}}>
                    <LineColumn className="editItems" column={3} >
                        {(config附设装置).map(([title,tag, _, callback]:any,i:number) => {
                            if(tag==='Z')  return  <React.Fragment key={i}></React.Fragment>;
                            else return (
                                <InputLine key={i} label={title+'：'}
                                           css={{ "& .InputLine__Head": {alignItems: 'center'} }}
                                >
                                    { callback ? callback(obj,setObj)
                                        :
                                        <Input value={obj?.[tag] ||''}
                                               onChange={e => {
                                                   setObj({...obj, [tag]: (e.currentTarget.value||undefined)});
                                               } } />
                                    }
                                </InputLine>
                            );
                        } )  }
                    </LineColumn>
                    备注：
                    <TextArea  value={obj?.Z ||''} rows={3}
                               onChange={e => setObj({ ...obj, Z: e.currentTarget.value||undefined}) } />
                    <Button onPress={() => {
                        if(seq !== null) {
                            inp?.[table]?.splice(seq, 1, obj);    //替换掉的
                            setInp({ ...inp, [table]: [...inp?.[table]] });
                        }
                        else if(inp?.[table]?.length>0){
                            inp?.[table]?.splice(inp?.[table]?.length, 0, obj);    //尾巴加
                            setInp({ ...inp, [table]: [...inp?.[table]] });
                        }
                        else  setInp({ ...inp, [table]: [obj] });
                    } }
                    >{(inp?.[table]?.length>0 && seq!==null)? `改一组就确认`: `新增一组`}</Button>
                </div>
            </Layer>;
        };
        const [render附设装置]=useTableEditor({breaks:breaks2,inp,setInp,
            headview:headvw2, config: config附设装置, table:'附设表', column:2,  defaultV:默认附设装置, editAs,maxRf:1});

        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            { ['桥架型起重机、臂架型起重机、电动葫芦等起重设备','升降机等登机设备'].map((typed: any, i: number) => {
                const titlesa=0===i ? titleJq : titleSj;
                return <React.Fragment key={i}>附表{nos}-{0===i? 1:3} {typed}:
                    <Table fixed={ ["13%","%"] } css={{borderCollapse: 'collapse'}} tight  miniw={800}>
                        <TableHead>
                            <TableRow><CCell>序号</CCell><CCell>检验内容</CCell></TableRow>
                        </TableHead>
                        <TableBody>
                        { titlesa.map((title: any, c:number) =>
                            <TableRow key={c}><CCell>{c+1}</CCell><Cell>{title}</Cell></TableRow>
                        ) }
                        </TableBody>
                    </Table>
                </React.Fragment>;
            }) }
            {render附设装置}
            {children ?? tail附设}
        </InspectRecordLayout>;
});

const defaultV附设表=[
    {n:1, y:variant附设[0]},
    {n:3, y:variant附设[1]}
];
export const AttachmentDeviceVw= ({orc, rep, label,nos,titleJq=title桥架,titleSj=title升降,children} :{orc:any, rep:any, label:any,nos:string,titleJq?:any[],titleSj?:any[],children?:any}
) => {
    //一条都没有做的：默认？ 若有添加任意一条就按照实际数据输出了。 也不管类型“variant附设”是否齐了；
    //【预留】一页尾巴最少的3.5rem的高度。避免尴尬一页才打印出孤零零的标题。
    return <>
        <div id='Attachment' css={{"@media print": {paddingBottom: '5rem', pageBreakInside: 'avoid'}} }>
            <Text variant="h4" css={{marginTop: '1rem',}}>{label}</Text>
        </div>
        <div css={ {"@media print": {marginTop: '-5rem'}} }>
            {(orc.附设表??defaultV附设表)?.map((o: any, i:number) => {
                const titlesa=o?.y==='升降机等登机设备' ? titleSj : titleJq;
                return <React.Fragment key={i}>
                    <Text variant="h5" css={{marginTop: i>0? '0.5rem': undefined}}>附表{nos}-{o?.n} {o?.y}</Text>
                    <Table  key={i} fixed={ ["8.2%","3%","39%","11%","%"] } tight  miniw={800} css={ {borderCollapse: 'collapse' } }>
                        <TableBody>
                            <RepLink ori rep={rep} tag={'Attachment'}>
                                <TableRow>
                                    <CCell colSpan={2}>设备名称</CCell>
                                    <CCell>{o?.t}</CCell>
                                    <CCell>设备型号</CCell>
                                    <CCell colSpan={2}>{o?.m}</CCell>
                                </TableRow>
                                <TableRow>
                                    <CCell colSpan={2}>额定起重量</CCell>
                                    <CCell>{o?.Q} t</CCell>
                                    <CCell>产品编号</CCell>
                                    <CCell colSpan={2}>{o?.p}</CCell>
                                </TableRow>
                                <TableRow>
                                    <CCell colSpan={2}>制造单位</CCell>
                                    <CCell colSpan={4}>{o?.u}</CCell>
                                </TableRow>
                                <TableRow><CCell>序号</CCell><CCell colSpan={4}>检验内容</CCell><CCell>检验结果</CCell></TableRow>
                                {  titlesa.map((title: any, c:number) =>
                                            <TableRow key={c}><CCell>{c+1}</CCell><Cell colSpan={4}>{title}</Cell>
                                                {0===c && <CCell rowSpan={titlesa.length}><Text variant="h4">{o?.r || '／'}</Text></CCell>}
                                            </TableRow>
                                )}
                                <TableRow>
                                    <CCell>备注</CCell>
                                    <Cell colSpan={5}><div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                                        {o?.Z}
                                    </div></Cell>
                                </TableRow>
                            </RepLink>
                        </TableBody>
                    </Table>
                </React.Fragment>;
            }) }
        </div>
        {children ?? tail附设}
    </>;
};
